<template>
  <el-form ref="layerGroupForm" :model="layerGroupForm" label-width="90px" size="small" @submit.native.prevent>
    <el-form-item label="图层组名称:">
      <el-input
        placeholder="请输入内容"
        v-model="layerGroupForm.name"
        clearable>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitLayerGroupForm()">确定</el-button>
      <el-button @click="cancelLayerGroupForm()">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    name:"LayerGroup",
    props:{
      nodeData:{
        type:Object,
        default:null
      },
      actionType:{
        type:String,
        default: "add"
      },
      freshTreeData:Function
    },
    data(){
      return{
        layerGroupForm:{
          name:"",
          id:"",
          fid:"",
          layerType:"layerGroup"
        }
      }
    },

    watch:{
      nodeData:{
        handler(newValue,oldValue){

          this.setValue();
        },
        deep:true
      }
    },
    methods:{
      setValue(){
        if(this.actionType == "add"){
          this.layerGroupForm = {
            name:"",
            id:"",
            fid:"",
            layerType:"layerGroup"
          }
          if(this.nodeData.id){
            this.layerGroupForm.fid = this.nodeData.id;
          }else{
            this.layerGroupForm.fid = "-1";
          }
        }else{
          this.layerGroupForm.id = this.nodeData.id;
          this.layerGroupForm.name = this.nodeData.name;
          this.layerGroupForm.fid = this.nodeData.fid;
        }
      },
      submitLayerGroupForm(){
        if(!this.layerGroupForm.name){
          this.$message({
            message: '图层组名称不能为空！！！',
            type: 'warning'
          });
          return;
        }
        var self = this;
        this.$http.editLayer(this.layerGroupForm)
        .then(res => {
          if(res.data.code===200){
            this.$message.success("添加图层组成功！");
            this.layerGroupForm.id = res.data.data;
            self.freshTreeData(this.layerGroupForm);
          }
        }).catch(err => {
            console.log("添加失败");
        });
        this.$emit('showDialog',false)
      },
      cancelLayerGroupForm(){
        this.layerGroupForm = {
          name:"",
          id:"",
          fid:"",
          layerType:"layerGroup"
        }
        this.$emit('showDialog',false)
      }
    },

    mounted(){
      this.setValue();
    },

  }
</script>
<style scoped>

</style>
